<template>
  <view class="live-card" @click="enterLiveRoom">
    <!-- 直播封面 -->
    <image :src="live.cover" class="live-cover" mode="aspectFill"></image>
    <!-- 直播状态和观看人数 -->
    <view class="live-status">
      <text class="status-text">直播中</text>
      <text class="viewer-count">{{ live.viewerCount }} 人观看</text>
    </view>
    <!-- 主播信息 -->
    <view class="anchor-info">
      <image :src="live.anchorAvatar" class="anchor-avatar" mode="aspectFill"></image>
      <text class="anchor-name">{{ live.anchorName }}</text>
    </view>
    <!-- 直播标题 -->
    <text class="live-title">{{ live.title }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义组件的 props，接收直播数据
const props = defineProps({
  live: {
    type: Object,
    required: true
  }
});

// 解构 props 中的直播数据
const { live } = props;

// 进入直播间的方法
const enterLiveRoom = () => {
  // 这里使用 uni.navigateTo 模拟进入直播间的跳转，你需要根据实际情况修改
  uni.navigateTo({
    url: `/pages/video/live/live?id=${live.id}` // 假设直播间页面路径和传参方式
  });
};
</script>

<style scoped lang="scss">
// 定义一些变量
$card-padding: 16px;
$card-border-radius: 8px;
$status-bg-color: rgba(0, 0, 0, 0.6);
$status-text-color: #fff;
$anchor-info-gap: 8px;
$anchor-avatar-size: 32px;

.live-card {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: $card-border-radius;
  margin-bottom: 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-2px);
  }

 .live-cover {
    width: 100%;
    height: 200px;
    border-top-left-radius: $card-border-radius;
    border-top-right-radius: $card-border-radius;
    position: relative;
  }

 .live-status {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: $status-bg-color;
    color: $status-text-color;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

 .anchor-info {
    display: flex;
    align-items: center;
    gap: $anchor-info-gap;
    padding: $card-padding;
  }

 .anchor-avatar {
    width: $anchor-avatar-size;
    height: $anchor-avatar-size;
	border: 1px solid #666;
    border-radius: 50%;
  }

 .anchor-name {
    font-size: 14px;
    color: #666;
  }

 .live-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 0 $card-padding $card-padding;
  }
}
</style>